<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>PS.vue Render中slots的使用</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<h3>Render里单个slot的使用</h3>
		<myslot1>
			<div>this is slot</div> 
		</myslot1>

		<h3>Render里多个slot的使用</h3>
		<myslot2>
			<p slot="slot1">this is slot1</p>
			<p slot="slot2">this is slot2</p>
		</myslot2>

		<h3>Render里单个scopedSlots的使用</h3>
		<myslot3>
			<template scope="props">
				<p>this is scopedSlots</p>
			</template>
		</myslot3>

		<h3>Render里多个scopedSlots的使用</h3>
		<myslot4>
			<template slot="slot1" scope="props">
				<p>{{ props.text }}</p>
			</template>
			<template slot="slot2" scope="props">
				<p>{{ props.text }}</p>
			</template>			
		</myslot4>
	</div>

	<script type="text/javascript">
		// 在Render里一个slot的使用
		Vue.component('myslot1',{
			render: function(createElement){
				var he = createElement('div',
						{
							domProps: {
								innerHTML: 'this child div'
							}
						})
				return createElement('div',[he, this.$slots.default])
			}
		})

		// 在Render里多个slot的使用
		Vue.component('myslot2',{
			render: function(createElement){
				var he = createElement('div',
						{
							domProps: {
								innerHTML: 'this child div'
							}
						})				
				return createElement('div', [he, this.$slots.slot1, this.$slots.slot2])
			}
		})

		// Render里单个scopedSlots的使用
		Vue.component('myslot3',{
			render: function(createElement){
				var he = createElement('div',
										{
											domProps: {
												innerHTML: 'this child div'
											}
										})
				return createElement('div',[he, this.$scopedSlots.default({ text: 'hello scope' })])	
			}
		})

		// Render里多个scopedSlots的使用
		Vue.component('myslot4',{
			render: function(createElement){
				var he = createElement('div',
										{
											domProps: {
												innerHTML: 'this child div'
											}
										})
				return createElement('div',
						[he,
						this.$scopedSlots.slot1({ text: 'hello scope slot1' }),
						this.$scopedSlots.slot2({ text: 'hello scope slot2' })
						])				
			}
		})
		var vm1 = new Vue({
			el: "#app"
		})
	</script>
</body>
</html>